<template>
  <div class="item">
    <div class="item-title">
      <span style="font-family: 'Microsoft YaHei',serif" v-if="required">{{ name }}<em
        style="color: red">*</em></span>
      <span style="font-family: 'Microsoft YaHei',serif" v-else>{{ name }}</span>
    </div>
    <div class="content">
      <el-cascader v-model="cascadeValue" :options="options" :show-all-levels="false"
                   :props="props"></el-cascader>
    </div>
  </div>
</template>

<script>
export default {
  name: "CascadeItem",
  data() {
    return {
      cascadeValue: this.value
      // cascadeProps: {
      //   multiple: this.multiple
      // },
    }
  },
  props: ['name', 'required', 'options', 'value', 'props']
}
</script>

<style scoped>
.item-title {
  position: relative;
  height: 40px;
}

.content {
  margin-bottom: 35px;
}

.el-cascader {
  width: 100%;
}

.el-button {
  width: 100%;
}

.el-button.is-circle {
  padding: 6px !important;
}
</style>
